<template>
  <div class="track_the_playback">
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="mapZZZ"></div>
    </div>

    <div class="work-type-wrap">
      <div class="map-infos" v-if="showMapInfo">
        <el-dropdown @command="handleClientCommand">
          <span
            class="el-dropdown-link"
            style="font-size: 38px; padding-left: 10px"
          >
            {{ ClientTempValue
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <!-- 选择'请选择‘这个选项，他没有command这个属性，所以选择他相当于，清空已经选择的选项 -->
            <!-- <el-dropdown-item>全部</el-dropdown-item> -->
            <!-- 选项的数据列表循环，这里的属性，只有commang必须要使用':'绑定才能使用，这个坑了我好久，所以，为了不忘记这个事情，他所有的属性，不管是否需要绑定，我们都使用':'绑定，这个总没有错 -->
            <el-dropdown-item
              v-for="(item, index) in ClientTemp"
              :disabled="!item.状态"
              :command="item.区域"
            >
              {{ item.区域 }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <span
            class="el-dropdown-link"
            style="
              font-size: 23px;
              text-align: right;
              width: 165px;
              display: inline-block;
            "
          >
            {{ WorkTypeTitle }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <!-- 选择'请选择‘这个选项，他没有command这个属性，所以选择他相当于，清空已经选择的选项 -->
            <el-dropdown-item command="">全部</el-dropdown-item>
            <!-- 选项的数据列表循环，这里的属性，只有commang必须要使用':'绑定才能使用，这个坑了我好久，所以，为了不忘记这个事情，他所有的属性，不管是否需要绑定，我们都使用':'绑定，这个总没有错 -->
            <el-dropdown-item
              v-for="(item, index) in WorkTypeTemp"
              :disabled="!item.状态"
              :command="item.作业类型"
            >
              {{ item.作业类型 }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 左侧面板 -->
    <div class="map-infos-wrap">
      <div class="map-infos" v-if="showMapInfo">
        <!-- 第五个面板 -->
        <div v-if="mapInfoTabValue === 0">
          <h3>
            综合实时统计
            <!-- <i>{{ realtimeOnlineStatisticsTotal }}辆</i> -->
          </h3>
          <!-- <el-row type="flex" justify="center">
            <el-col :span="20">
              <div class="map-operation" >
                <ul style="margin-bottom:10px">
                  <li
                    v-for="(item, index) in cliOperationsSummary"
                    :class="{ active: cliInfoTabValue === index }"
                    :key="index"
                    @click="changeOperationSummaryValue(item, index)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div></el-col
            >
          </el-row>

          <div>
            <h3>
              总体
            </h3>
          </div> -->
          <div
            v-for="(item, index) in VehicleWorkTemp"
            :key="item"
            style="width: 50%; float: left"
          >
            <div class="hd">{{ item.value }}</div>
            <div class="ht">{{ item.name }}</div>
          </div>

          <div style="width: 50%; height: 10.5vw; float: left" id="Pie1"></div>

          <div style="width: 50%; height: 10.5vw; float: right" id="Pie2"></div>
        </div>
        <!-- 第一个面板 -->
        <!-- <div v-if="mapInfoTabValue === 1">
          <h3>
            车辆实时在线统计
            <i>{{ realtimeOnlineStatisticsTotal }}辆</i>
          </h3>
          <div class="item-wrap">
            <div class="item-con">
              <h2>{{ realtimeOnlineStatisticsCount }}</h2>
              <span>在线</span>
            </div>
            <div class="item-con">
              <h2>
                {{
                  realtimeOnlineStatisticsTotal - realtimeOnlineStatisticsCount
                }}
              </h2>
              <span>离线</span>
            </div>
          </div>
          <h3>车辆分类情况</h3>
          <el-table
            :data="realtimeOnlineStatisticsData"
            class="card-table"
            style="width: 100%"
            size="mini"
            :header-cell-style="{ height: '40px' }"
            border
            fit
            highlight-current-row
          >
            <el-table-column
              prop="类型"
              label="类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="在线数量"
              label="在线车辆"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="全部数量"
              label="全部车辆"
              align="center"
            ></el-table-column>
          </el-table>
        </div> -->
        <!-- 第二个面板 -->
        <!-- <div v-if="mapInfoTabValue === 2">
          <h3>
            设施图层
          </h3>
          <div class="icon-wrap">
            <div
              class="icon-con"
              v-for="(item, index) in mapOperationsList"
              :class="{ hasColor: item.active }"
              :key="index"
              @click="changeOperationValue(item, index)"
            >
              <i :class="item.icon"></i>
              <el-tag effect="dark" size="mini">{{ item.num }}</el-tag>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div> -->
        <div v-if="mapInfoTabValue === 1">
          <h3>
            作业图层
            <!-- <i>466个</i> -->
          </h3>
          <div class="icon-wrap" style="height: 100px" id="w11">
            <div
              class="icon-con"
              v-for="(item, index) in mapRoadList"
              :class="{ hasColor: item.active }"
              :key="index"
            >
              <el-checkbox
                @change="changeMapRoad(item)"
                v-model="item.active"
                >{{ item.name }}</el-checkbox
              >
            </div>
          </div>
          <h3>
            文字图层
            <!-- <i>466个</i> -->
          </h3>
          <div class="icon-wrap" style="height: 50px" id="w12">
            <div class="icon-con">
              <el-checkbox
                @change="changeMapRoadName"
                v-model="checkedRNAME"
                label="道路名称"
              ></el-checkbox>
            </div>
          </div>
          <h3>
            功能图层
            <!-- <i>466个</i> -->
          </h3>
          <div class="icon-wrap" style="height: 50px" id="w12">
            <div class="icon-con">
              <el-checkbox
                v-model="checked1"
                label="加水点"
                @change="handleCheckWater"
              ></el-checkbox>
            </div>
            <div class="icon-con">
              <el-checkbox
                v-model="checked2"
                label="排污点"
                @change="handleCheckPollution"
              ></el-checkbox>
            </div>
          </div>
          <h3>
            地图图层
            <!-- <i>466个</i> -->
          </h3>
          <div class="icon-wrap" style="height: 100px" id="w13">
            <div
              class="icon-con"
              v-for="(item, index) in mapFeatureList"
              :class="{ hasColor: item.active }"
              :key="index"
            >
              <el-checkbox @change="changeMapfeature" v-model="item.active">{{
                item.name
              }}</el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <!-- 面板切换选项卡 -->
      <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div>
    </div>

    <!-- 图例 -->
    <!-- <div class="legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>

      <p>
        <span>
          <img :src="legend.routeJISAO" alt />
        </span>
        <span style="font-size: 12px">机扫车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXIAOXING" alt />
        </span>
        <span style="font-size: 12px">小型机扫车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXICHEN" alt />
        </span>
        <span style="font-size: 12px">吸尘车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeSASHUI" alt />
        </span>
        <span style="font-size: 12px">洒水车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeGAOYA" alt />
        </span>
        <span style="font-size: 12px">高压清洗车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXILU" alt />
        </span>
        <span style="font-size: 12px">洗路车</span>
      </p>
    </div> -->

    <!-- 右下角 图例展开按钮-->
    <!-- <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div> -->

    <!-- 完成情况 -->
    <div class="schedule" v-if="showSchedule">
      <h3>
        {{ WorkTypeValue }}作业完成情况
        <i class="iconfont icon-shanchu" @click="showSchedule = false"></i>
      </h3>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-input
            placeholder="请输路段名"
            prefix-icon="el-icon-search"
            v-model="input2"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getRoadWorkInfoTemp"
            ></el-button>
          </el-input>

          <div style="margin: 15px 0; color: #606266">
            共{{ roadWorkList.length }}条作业道路
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18" :offset="6">
          <el-radio-group
            v-model="workLevel"
            @change="getRoadWorkInfoTemp"
            style="margin-bottom: 10px"
            size="small"
          >
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="一级">一级</el-radio-button>
            <el-radio-button label="二级">二级</el-radio-button>
            <el-radio-button label="三级">三级</el-radio-button>
            <el-radio-button label="四级">四级</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in roadWorkList" :key="item">
        <!-- v-for="(item, index) in mapInfoTabs" -->
        <!-- [{ id: "1", name: "津塘公路1", describe: "2.3公里/2.3公里", percentage: "100" }, -->
        <el-col :span="2" :offset="1">
          <el-tag effect="dark">{{ index + 1 }} </el-tag>
        </el-col>
        <el-col :span="19" :offset="1">
          <h3 style="text-align: left">
            {{ item.Rname + '(' + item.begin + ' - ' + item.end + ')' }}
          </h3>
          <!-- <div style="margin: 5px 0; color: #606266">
            作业完成度({{ item.AL+'公里 / '+item.ArcGisLength +'公里' + '规定作业' +item.TIMES + '遍' }})
          </div> -->
          <div style="margin: 5px 0; color: #606266">
            {{
              '规定作业' +
              item.TIMESint +
              '遍， 实际作业' +
              item.LIMIT +
              '遍， 已作业' +
              item.ALint +
              '米'
            }}
          </div>
          <el-progress :percentage="item.WORKRATEint"></el-progress>
          <!-- <el-progress :percentage="50"></el-progress> -->
        </el-col>

        <el-col :span="22" :offset="1">
          <el-divider></el-divider>
        </el-col>
      </el-row>
    </div>
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_schedule right"
      v-if="!showSchedule"
      @click="showSchedule = !showSchedule"
    >
      完成情况
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";

import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import imgrouteJISAO from "@/assets/img/MapMarker/vehicleRoute/jsRoute.png";
import imgrouteXIAOXING from "@/assets/img/MapMarker/vehicleRoute/xxRoute.png";
import imgrouteXICHEN from "@/assets/img/MapMarker/vehicleRoute/xcRoute.png";
import imgRouteSASHUI from "@/assets/img/MapMarker/vehicleRoute/ssRoute.png";
import imgrouteGAOYA from "@/assets/img/MapMarker/vehicleRoute/gyRoute.png";
import imgrouteXILU from "@/assets/img/MapMarker/vehicleRoute/xlRoute.png";

import imgMarkerWater from "@/assets/img/marker/加水点.png";
import imgMarkerPollution from "@/assets/img/marker/排污水点.png";

import html2canvas from "html2canvas";
import * as echarts from 'echarts';
export default {
  data () {
    return {
      input2: "",
      workLevel: "",
      ClientTemp: [],
      ClientTempValue: "",
      checkedRNAME: true,
      checkedRWork: false,
      checked1: true,
      checked2: true,
      ClientTempNo: "",
      VehicleWorkTemp: [],
      WorkTypeTemp: [],
      WorkTypeValue: "",
      WorkTypeTitle: "",
      checkboxGroup1: ['上海'],
      VehicleWorkPie1: "Pie1",
      VehicleWorkPie2: "Pie2",
      echartPie1: "",
      echartPie2: "",
      showMapInfo: true,
      // 1应作业道路，2已作业道路，3未作业道路，4作业未作业道路
      mapRoadList: [
        {
          name: "应作业道路",
          icon: "el-icon-knife-fork",
          num: 0,
          tag: 1,
          active: true,
        },
        {
          name: "已作业道路",
          icon: "el-icon-truck",
          num: 0,
          tag: 2,
          active: true,
        },
        {
          name: "未作业道路",
          icon: "el-icon-box",
          num: 0,
          tag: 3,
          active: true,
        },
        // {
        //   name: "作业未作业道路",
        //   icon: "el-icon-house",
        //   num: 0,
        //   tag: 4,
        //   active: true,
        // }
      ],
      mapFeatureList: [
        {
          name: "道路",
          icon: "el-icon-knife-fork",
          num: 0,
          active: false,
        },
        {
          name: "陆地",
          icon: "el-icon-truck",
          num: 0,
          active: true,
        },
        {
          name: "水系",
          icon: "el-icon-box",
          num: 0,
          active: true,
        },
        {
          name: "绿地",
          icon: "el-icon-house",
          num: 0,
          active: true,

          // }, {
          //   name: '建筑物',
          //   icon: 'el-icon-refrigerator',
          //   num: 0,
          //   active: true
        },
        {
          name: "建筑点位",
          icon: "el-icon-knife-fork",
          num: 0,
          active: false,
          // }, {
          //   name: '人造区域',
          //   icon: 'el-icon-chicken',
          //   num: 0,
          //   active: true
        },
      ],
      mapInfoTabValue: 0,
      mapInfoTabs: [
        {
          icon: "el-icon-truck",
        },
        // {
        //   icon: "el-icon-s-opportunity",
        // },
        // {
        //   icon: "el-icon-collection-tag",
        // },
        {
          icon: "el-icon-picture-outline-round",
        },
      ],
      cliInfoTabValue: 0,
      cliOperationsSummary: [
        {
          name: "博德尔公司",
          num: 0,
          active: true,
        },
        {
          name: "东丽城管委",
          num: 1,
          active: false,
        },
        {
          name: "东丽东片区",
          num: 2,
          active: false,
        },
      ],
      Rname: null,
      LICENSE_PLATE: null,
      setSlider: {
        max: 100,
        value: 0,
        step: 1,
      },
      timesdstr: "全天",
      map: null,
      hshmap: new Map(),
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      dataList: [],
      dataListc: [],
      dataCurrentIndex: 0,
      CLIENT_GROUP_NAME: "",
      CLIENT_GROUP_NO: "",
      VID: 0,
      setTime: {},
      selectDay: "",
      groupingList: [],
      carList: [],
      onecardataList: [],
      roadList: [],
      roadWorkList: [],
      progressList: [{ id: "1", name: "津塘公路1", describe: "2.3公里/2.3公里", percentage: "100" }, { id: "2", name: "机场二通道", describe: "2.8公里/3.36公里", percentage: "83.3" }, { id: "3", name: "金钟拓宽路", describe: "0.8公里/0.4公里", percentage: "50" },],
      timesdlist: [{ timesd: "全天" }, { timesd: "上午" }, { timesd: "下午" }],
      showcarnamechecked: false,
      showLegend: true,
      showSchedule: true,
      legend: {
        routeJISAO: imgrouteJISAO,
        routeXIAOXING: imgrouteXIAOXING,
        routeXICHEN: imgrouteXICHEN,
        routeSASHUI: imgRouteSASHUI,
        routeGAOYA: imgrouteGAOYA,
        routeXILU: imgrouteXILU,
      },
      Data: {
        arrayWaterMarkerData: [],
        arrayPollutionMarkerData: [],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      linevalue: {
        jsvalue: 4,
        gyvalue: 8,
        xlvalue: 12,
        xcvalue: 16,
        ssvalue: 20,
        xjvalue: 24,
        jscheck: true,
        gycheck: true,
        xlcheck: true,
        xccheck: true,
        sscheck: true,
        xjcheck: true,
        cxvalue: 5,
      },
      road: {
        data1: null,
        data2: null,
        data3: null,
        data4: null,
        mapv1: null,
        mapv2: null,
        mapv3: null,
        mapv4: null,
        dataSet1: null,
        dataSet2: null,
        dataSet3: null,
        dataSet4: null,
        mapvText1: null,
        mapvText2: null,
        mapvText3: null,
        mapvText4: null,
        dataSetText1: null,
        dataSetText2: null,
        dataSetText3: null,
        dataSetText4: null,
      },
      MapV: {
        roadLayer: null,
        roadNameLayer: null,
        dataSetWorkerLine: null,
      },
      theRoad: null,
    };
  },
  created () {
    this.VID = this.$route.query.VID;
    var now = new Date();
    now.setDate(now.getDate() - 1);
    var monthn = now.getMonth() + 1;
    var yearn = now.getFullYear();
    var dayn = now.getDate();
    this.selectDay = yearn + "-" + monthn + "-" + dayn;
    // 隐藏图例
    // eventBus.$on("toHideLegend", () => {
    //   this.showLegend = false;
    // });
  },
  methods: {
    getData () {
      if (this.road.dataSet1) {
        this.road.dataSet1.set([])
      }
      if (this.road.dataSet2) {
        this.road.dataSet2.set([])
      }
      if (this.road.dataSet3) {
        this.road.dataSet3.set([])
      }
      if (this.road.dataSet4) {
        this.road.dataSet4.set([])
      }
      this.getRoadWorkInfoTemp();
      this.getRoadPointInfoTemp1();
      this.getRoadPointInfoTemp2();
      this.getRoadPointInfoTemp3();
      // this.getRoadPointInfoTemp4();
      this.GetVehicleWorknfoTemp();
    },
    handleCommand (command) {
      if (command == "") {
        this.WorkTypeTitle = '全部'
        this.GetVehicleWorknfoTemp();
      } else {
        this.WorkTypeTitle = command
        this.WorkTypeValue = command
        this.getData();
      }
    },
    handleClientCommand (command) {
      this.ClientTempValue = command
      this.ClientTempNo = this.ClientTemp.filter(item => item.区域 === this.ClientTempValue)[0].CLIENT_NO
      // console.log(this.ClientTempNo)
      // this.GetVehicleWorknfoTemp()
      // this.$message('click on item ' + command);
      this.getData();
    },
    async GetVehicleWorknfoTemp () {
      // GetRoadPointInfoTemp(ClientName, Rname, Type, CarType);
      var WorkType = this.WorkTypeValue
      if (this.WorkTypeTitle === '全部') {
        var WorkType = ''
      }
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=dlhw&url=EXEC S_GetWorkInfoTemp '" + this.ClientTempNo + "','" + WorkType + "'"
      const { data } = await this.$Http.get(url)
      var arrayPie1 = []
      var arrayPie2 = []
      this.VehicleWorkTemp = [];
      data.forEach(element => {

        if (element.name === '机扫覆盖率') {
          element.value = parseInt(element.value.split('%')[0])
          arrayPie1.push(element.value, 100 - element.value)
          // console.log(this.mapInfoTabValue)
          // if (this.mapInfoTabValue === 0) {
          //   this.VehicleWorkPie1 = "Pie1"
          // } else {
          //   this.VehicleWorkPie1 = ""
          // }
          this.dyclyhPieSearchClick1(arrayPie1)
        } else if (element.name === '扫保面积占比') {
          element.value = parseInt(element.value.split('%')[0])
          arrayPie2.push(element.value, 100 - element.value)
          // if (this.mapInfoTabValue === 0) {
          //   this.VehicleWorkPie2 = "Pie2"
          // } else {
          //   this.VehicleWorkPie2 = ""
          // }
          this.dyclyhPieSearchClick2(arrayPie2)
        } else {
          this.VehicleWorkTemp.push(element)
        }
      });
    },
    async dyclyhPieSearchClick1 (data) {
      // 绘制图表
      if (this.echartPie1) {
        this.echartPie1.clear()
      }
      setTimeout(() => {
        this.echartPie1 = echarts.init(document.getElementById('Pie1'));
        this.echartPie1.setOption(
          {
            tooltip: {
              trigger: 'item'
            },
            title: {
              subtext: '机扫覆盖率',
              left: 'center',
              top: '68%',
              subtextStyle: {
                color: 'rgb(71, 71, 71)',
                fontSize: 15
              },
            },
            tooltip: {
              trigger: 'item'
            },
            series: [{
              height: '70%',
              label: {
                fontSize: 15,
                formatter: '{c}',
                position: 'inside'
              },
              labelLine: {
                show: false
              },
              type: 'pie',
              // data: data,
              data: [{ "value": data[0], "name": "已覆盖:" + data[0] + "%" }, { "value": data[1], "name": "未覆盖：" + data[1] + "%" }]
            }]
          });
      }, 100)
    },
    async dyclyhPieSearchClick2 (data) {
      // 绘制图表
      if (this.echartPie2) {
        this.echartPie2.clear()
      }
      setTimeout(() => {
        this.echartPie2 = echarts.init(document.getElementById('Pie2'));
        this.echartPie2.setOption(
          {
            title: {
              subtext: '扫保面积占比',
              left: 'center',
              top: '68%',
              subtextStyle: {
                color: 'rgb(71, 71, 71)',
                fontSize: 15
              },
            },
            tooltip: {
              trigger: 'item'
            },
            series: [{
              height: '70%',
              label: {

                fontSize: 15,
                formatter: '{c}',
                position: 'inside'
              },
              labelLine: {
                show: false
              },
              type: 'pie',
              // data: data,
              data: [{ "value": data[0], "name": "已扫保:" + data[0] + "%" }, { "value": data[1], "name": "未扫保：" + data[1] + "%" }]
            }]
          });
      }, 100)
    },
    async GetClientTemp () {
      // GetRoadPointInfoTemp(ClientName, Rname, Type, CarType);
      var url = 'Vehicle/GetClientTemp?ClientNO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.ClientTemp = data;
      this.ClientTempValue = data[0].区域
      this.ClientTempNo = data[0].CLIENT_NO
      this.GetWorkTypeTemp();
    },
    async GetWorkTypeTemp () {
      // GetRoadPointInfoTemp(ClientName, Rname, Type, CarType);
      var url = 'Vehicle/GetWorkTypeTemp?ClientNO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.WorkTypeTemp = data;
      var found = false
      console.log(data)
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.状态) {
          this.WorkTypeValue = element.作业类型
          this.WorkTypeTitle = element.作业类型
          break;
        }
      }
      // data.forEach(element => {
      // if (element.状态) {
      //   found = true;
      //   this.WorkTypeValue = element.作业类型
      //   this.WorkTypeTitle = element.作业类型
      //   throw new Error("找到，停止循环，不是报错");
      // }
      // });

      this.getData();
    },
    async getRoadWorkInfoTemp () {
      // GetRoadPointInfoTemp(ClientName, Rname, Type, CarType);
      var url = 'Vehicle/GetRoadWorkInfoTemp?Rname=' + this.input2 + '&Level=' + this.workLevel + '&CarType=' + this.WorkTypeValue + '&ClientName=' + this.ClientTempNo
      const { data } = await this.$Http.get(url)
      this.roadWorkList = [];
      data.forEach(element => {
        //  '规定作业' + item.TIMES + '遍' + ' 实际作业' +item.LIMIT + '遍 作业'+ item.AL + '米'
        element.TIMESint = parseInt(element.TIMES)
        // element.LIMITint = parseInt(element.LIMIT)
        element.ALint = parseInt(element.AL)
        element.WORKRATEint = parseInt(element.WORKRATE)
        this.roadWorkList.push(element)
      });
    },
    async getRoadPointInfoTemp1 () {
      // GetRoadPointInfoTemp(ClientName, Rname, Type, CarType);
      var url = 'Vehicle/GetRoadPointInfoTemp?Rname=&Type=4&CarType=' + this.WorkTypeValue + '&ClientName=' + this.ClientTempNo
      const { data } = await this.$Http.get(url)
      this.road.data1 = data;

      // this.road.mapv1 = this.drawLine(data, 'grey', 10)
      var arrRoad = []
      var arrPointName1 = []
      var arrPointName2 = []
      var roadName = ''
      data.forEach(element => {
        if (roadName != element.NAME || element.LATITUDEMID != 0) {
          // console.log(element.ROUDID)
          if (element.ISWORK > 0) {
            arrPointName1.push({
              geometry: {
                type: 'Point',
                coordinates: [element.LONGITUDEMID, element.LATITUDEMID]
              },
              text: element.NAME + ',' + element.LIMIT
            });
          } else {
            arrPointName2.push({
              geometry: {
                type: 'Point',
                coordinates: [element.LONGITUDEMID, element.LATITUDEMID]
              },
              text: element.NAME
            });
          }
          roadName = element.NAME
        }

        arrRoad.push({
          geometry: {
            type: 'LineString',
            rID: element.RID,
            isWork: element.ISWORK,
            coordinates: element.coordinates
          }
        });
      });
      if (this.road.dataSet1) {
        this.road.dataSet1.set(arrRoad);
      } else {
        this.road.dataSet1 = new mapv.DataSet(arrRoad);
        this.road.mapv1 = this.drawLine(this.road.dataSet1, 'grey', 10)

        this.road.dataSetText2 = new mapv.DataSet(arrPointName1);
        this.road.dataSetText3 = new mapv.DataSet(arrPointName2);

        this.road.mapvText2 = new mapv.baiduMapLayer(this.map, this.road.dataSetText2, {
          draw: 'text',
          zIndex: 100,
          size: 14,
          // avoid: true, // 开启文本标注避让
          textBaseline: 'middle',
        })
        this.road.mapvText3 = new mapv.baiduMapLayer(this.map, this.road.dataSetText3, {
          draw: 'text',
          zIndex: 100,
          size: 14,
          // avoid: true, // 开启文本标注避让
          textBaseline: 'middle',
        })
      }
    },
    drawLine (dataSet, color, zIndex) {
      var that = this
      return new mapv.baiduMapLayer(this.map, dataSet, {
        zIndex: zIndex,
        strokeStyle: color,
        lineWidth: 8,
        size: 12,
        lineJoin: 'miter',
        lineCap: 'round',
        draw: 'simple',
        methods: {
          click: function (e) {
            if (e && that.theRoad) {
              setTimeout(() => {
                var item = null;
                that.roadWorkList.forEach(element => {
                  if (element.id === e.geometry.rID) {
                    item = element
                  }
                });
                if (item) {
                  const opts = {
                    width: 250,     // 信息窗口宽度
                    height: 230,     // 信息窗口高度
                    title: item.Rname + '（' + item.RGrade + '）', // 信息窗口标题
                  }
                  var str = ''
                  if (e.geometry.isWork > 0) {
                    str = ` <div style="font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
  <div style="margin-top:10px;">  规定作业数：${item.TIMESint}遍</div>
  <div style="margin-top:10px;">  实际作业数：${item.LIMIT}遍</div>
	<div style="margin-top:10px;">  道路长度：${item.ArcGisLength}米</div>
  <div style="margin-top:10px;">  总作业距离：${item.AL}米</div>
	<div style="margin-top:10px;">  正向作业距离：${parseFloat(item.ZL).toFixed(2)}米</div>
  <div style="margin-top:10px;">  反向作业距离：${parseFloat(item.FL).toFixed(2)}米</div>
  </div>`
                  } else {
                    str = ` <div style="font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
  <div style="margin-top:10px;">  道路未作业</div>
  </div>`
                    opts["height"] = 80
                  }
                  const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象
                  that.map.openInfoWindow(infoWindow, that.theRoad)
                  that.theRoad = null
                }
              }, 100)
              // that.map.centerAndZoom(new BMap.Point(e.geometry.coordinates[0][0], e.geometry.coordinates[0][1]), this.mapZoom)
              // new mapv.baiduMapLayer(that.map, new mapv.DataSet([{
              //   geometry: {
              //     type: 'LineString',
              //     coordinates: e.coordinates
              //   }
              // }]), {
              //   zIndex: 2,
              //   strokeStyle: 'yellow',
              //   lineWidth: 12,
              //   lineJoin: 'miter',
              //   lineCap: 'round',
              //   draw: 'simple',
              // });
            } else {
            }
          }
        },
      });
    },
    async getRoadPointInfoTemp2 () {
      var url = 'Vehicle/GetRoadPointInfoTemp?Rname=&Type=2&CarType=' + this.WorkTypeValue + '&ClientName=' + this.ClientTempNo
      const { data } = await this.$Http.get(url)
      this.road.data2 = data;
      var arrRoad = []
      data.forEach(element => {
        arrRoad.push({
          geometry: {
            type: 'LineString',
            rID: element.RID,
            isWork: element.ISWORK,
            coordinates: element.coordinates
          }
        });
      });
      if (this.road.dataSet2) {
        this.road.dataSet2.set(arrRoad);
      } else {
        this.road.dataSet2 = new mapv.DataSet(arrRoad);
        this.road.mapv2 = this.drawLine(this.road.dataSet2, 'green', 12)
        // this.road.mapv2 = new mapv.baiduMapLayer(this.map, this.road.dataSet2, {
        //   zIndex: 12,
        //   strokeStyle: 'green',//47,79,79
        //   lineWidth: 8,
        //   lineJoin: 'miter',
        //   lineCap: 'round',
        //   draw: 'simple',
        // });
      }
    },
    async getRoadPointInfoTemp3 () {
      var url = 'Vehicle/GetRoadPointInfoTemp?Rname=&Type=3&CarType=' + this.WorkTypeValue + '&ClientName=' + this.ClientTempNo
      const { data } = await this.$Http.get(url)
      this.road.data3 = data;
      var arrRoad = []
      data.forEach(element => {
        arrRoad.push({
          geometry: {
            type: 'LineString',
            rID: element.RID,
            isWork: element.ISWORK,
            coordinates: element.coordinates
          }
        });
      });
      if (this.road.dataSet3) {
        this.road.dataSet3.set(arrRoad);
      } else {
        this.road.dataSet3 = new mapv.DataSet(arrRoad);
        this.road.mapv3 = this.drawLine(this.road.dataSet3, 'red', 13)
        //   this.road.mapv3 = new mapv.baiduMapLayer(this.map, this.road.dataSet3, {
        //     zIndex: 13,
        //     strokeStyle: 'red',//47,79,79
        //     lineWidth: 8,
        //     lineJoin: 'miter',
        //     lineCap: 'round',
        //     draw: 'simple',
        //   });
      }
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)
      // 设置地图显示的城市 此项是必须设置的
      // this.map.setCurrentCity(MapStr.MapName); 
      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true);

      const _this = this
      // 点击屏幕
      this.map.addEventListener('click', function (e) {
        _this.theRoad = e.point
      });
      //缩放屏幕
      // this.map.addEventListener("zoomend", function (e) {
      //   console.log("地图缩放至：" + this.getZoom() + "级");
      //   console.log(_this.road.mapv1);
      //   if (e.target.getZoom() < 17) {
      //     _this.road.mapv1.setOptions({
      //       lineWidth: 6,
      //       size:12
      //     });
      //     _this.road.mapv2.setOptions({
      //       lineWidth: 6,
      //       size:12
      //     });
      //     _this.road.mapv3.setOptions({
      //       lineWidth: 6,
      //       size:12
      //     });
      //   } else
      //   // if (e.target.getZoom() > 20) 
      //   {
      //     _this.road.mapv1.setOptions({
      //       lineWidth: 8,
      //       size:12
      //     });
      //     _this.road.mapv2.setOptions({
      //       lineWidth: 8,
      //       size:12
      //     });
      //     _this.road.mapv3.setOptions({
      //       lineWidth: 8,
      //       size:12
      //     });
      //   }
      //   // var aa = e.target.getZoom();
      //   // if (e.target.getZoom() > 12 && _this.isZoomChange === "S") {
      //   //   _this.isZoomChange = "B";
      //   //   for (var key in _this.MapV.textLayerDic) {
      //   //     _this.MapV.textLayerDic[key].show();
      //   //   }
      //   //   _this.drawMapV();
      //   //   // _this.checkboxType()
      //   // }
      //   // if (e.target.getZoom() <= 12 && _this.isZoomChange === "B") {
      //   //   _this.isZoomChange = "S";
      //   //   for (var key1 in _this.MapV.textLayerDic) {
      //   //     _this.MapV.textLayerDic[key1].hide();
      //   //   }
      //   //   _this.drawMapV();
      //   //   // _this.checkboxType()
      //   // }
      // });

      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), {
      //   anchor: new BMap.Size(20, 20),
      // });
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), {
      //   icon: myIcon,
      // });
      // this.markerWithSlider.disableMassClear();
      // this.map.addOverlay(this.markerWithSlider);
    },
    // 地图信息tab切换
    changeMapInfoTabValue (index) {
      if (index === this.mapInfoTabValue && this.showMapInfo) {
        this.showMapInfo = false;
        this.mapInfoTabValue = "";
      } else {
        this.showMapInfo = true;
        this.mapInfoTabValue = index;

        this.GetVehicleWorknfoTemp()
        if (index != 0) {
          this.echartPie1.dispose();
          this.echartPie2.dispose();
        } else {

        }
      }
    },
    changeMapRoadName () {
      if (this.checkedRNAME) {
        if (this.mapRoadList[0].active) {
          this.road.mapvText2.show();
          this.road.mapvText3.show();
          // this.road.mapvText1.hide();
        } else {
          if (this.mapRoadList[1].active) {
            this.road.mapvText2.show();
          } else {
            this.road.mapvText2.hide();
          }
          if (this.mapRoadList[2].active) {
            this.road.mapvText3.show();
          } else {
            this.road.mapvText3.hide();
          }
        }
      } else {
        this.road.mapvText2.hide();
        this.road.mapvText3.hide();
      }
      // if (this.checkedRNAME) {
      //   this.road.mapvText2.show();
      //   this.road.mapvText3.show();
      //   // this.road.mapvText1.hide();
      // } else {
      //   this.road.mapvText2.hide();
      //   this.road.mapvText3.hide();
      //   // this.road.mapvText1.hide();
      // }
    },
    changeMapRoad (item) {
      // 1应作业道路，2已作业道路，3未作业道路，4作业未作业道路
      switch (item.tag) {
        case 1:
          {
            if (item.active) {
              this.road.mapv1.show();
              // this.road.mapvText2.show();
              // this.road.mapvText3.show();
            } else {
              this.road.mapv1.hide();
              // this.road.mapvText2.hide();
              // this.road.mapvText3.hide();
            }
          }
          break;
        case 2:
          {
            if (item.active) {
              this.road.mapv2.show();
              // this.road.mapvText2.show();
            } else {
              this.road.mapv2.hide();
              // this.road.mapvText2.hide();
            }
          }
          break;
        case 3:
          {
            if (item.active) {
              this.road.mapv3.show();
              // this.road.mapvText3.show();

            } else {
              this.road.mapv3.hide();
              // this.road.mapvText3.hide();
            }
          }
          break;
        case 4:
          {
            if (item.active) {
              this.road.mapv4.show();
            } else {
              this.road.mapv4.hide();
            }
          }
          break;

        default:
          break;
      }
      if (this.checkedRNAME) {
        if (this.mapRoadList[0].active) {
          this.road.mapvText2.show();
          this.road.mapvText3.show();
          // this.road.mapvText1.hide();
        } else {
          if (this.mapRoadList[1].active) {
            this.road.mapvText2.show();
          } else {
            this.road.mapvText2.hide();
          }
          if (this.mapRoadList[2].active) {
            this.road.mapvText3.show();
          } else {
            this.road.mapvText3.hide();
          }
        }
      }
    },
    changeMapfeature () {
      // item.active = !item.active
      // console.log(index);
      var mapStyle = [
        {
          featureType: "land", //陆地
          elementType: "all",
          stylers: {
            visibility: this.returnVisibility(this.mapFeatureList[1].active),
          },
        },
        {
          featureType: "water", //水系
          elementType: "all",
          stylers: {
            visibility: this.returnVisibility(this.mapFeatureList[2].active),
          },
        },
        {
          featureType: "green", //绿地
          elementType: "all",
          stylers: {
            visibility: this.returnVisibility(this.mapFeatureList[3].active),
          },
          // }, {
          //   "featureType": "manmade", //人造区域
          //   "elementType": "all",
          //   "stylers": {
          //     "visibility": this.returnVisibility(this.mapFeatureList[6].active)
          //   }
          // }, {
          //   "featureType": "building", //建筑物
          //   "elementType": "all",
          //   "stylers": {
          //     "visibility": this.returnVisibility(this.mapFeatureList[4].active)
          //   }
        },
        {
          featureType: "road", //道路
          elementType: "all",
          stylers: {
            visibility: this.returnVisibility(this.mapFeatureList[0].active),
          },
        },
        {
          featureType: "poilabel", //兴趣点
          elementType: "all",
          stylers: {
            visibility: this.returnVisibility(this.mapFeatureList[4].active),
          },
        },
      ];
      this.map.setMapStyle({
        styleJson: mapStyle,
      });
    },
    returnVisibility (active) {
      if (active) {
        return 'on';
      } else {
        return 'off';
      }
    },
    // 改变右上方显示隐藏图标
    // changeOperationValue (item, index) {
    //   item.active = !item.active;
    //   switch (index) {
    //     case 0:
    //       this.drawMapV();
    //       break;
    //     case 1:
    //       this.handleCheckWater();
    //       break;
    //     case 2:
    //       this.handleCheckPollution();
    //       break;
    //     case 3:
    //       this.handleCheckNCD();
    //       break;
    //     case 4:
    //       this.handleCheckXQCY();
    //       break;
    //     case 5:
    //       this.handleCheckCY();
    //       break;
    //     default:
    //       break;
    //   }
    // },
    // // 获取处理厂
    async getPlaceWaterInfo () {
      var url = 'CarService/getPlaceWaterInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      var arrayA = [], arrayP = [];
      data.forEach(element => {
        switch (element.TYPE) {
          case 'A':
            arrayA.push(element)
            break;
          case 'P':
            arrayP.push(element)
            break;
        }
      });
      // console.log('加水点')
      // console.log(data)
      // eventBus.$emit('mapPlaceWater', arrayA)
      this.Data.arrayWaterMarkerData = arrayA
      // eventBus.$emit('mapPlacePollution', arrayP)
      this.Data.arrayPollutionMarkerData = arrayP

      this.drawMapVUnmove(
        this.Data.arrayWaterMarkerData,
        imgMarkerWater,
        "Water"
      );
      this.drawMapVUnmove(
        this.Data.arrayPollutionMarkerData,
        imgMarkerWater,
        "Pollution"
      );
      // this.handleCheckWater();
      // this.handleCheckPollution();
    },
    handleCheckWater () {
      let key = "Water";
      var vIcon = this.MapV.VIcon_Installations[key];
      var vText = this.MapV.VText_Installations[key];
      if (this.checked1) {
        vIcon.show();
        vText.show();
      } else {
        vIcon.hide();
        vText.hide();
      }
    },
    handleCheckPollution () {
      let key = "Pollution";
      var vIcon = this.MapV.VIcon_Installations[key];
      var vText = this.MapV.VText_Installations[key];
      if (this.checked2) {
        vIcon.show();
        vText.show();
      } else {
        vIcon.hide();
        vText.hide();
      }
    },
    drawMapVUnmove (arrayPoint, icon, key) {
      // if (this.mapOperationsList[1].active) {
      const _self = this;

      let img = new Image();
      img.src = icon;
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        let arrayImage = arrayPoint.map((v) => {
          v.geometry = {
            type: "Point",
            coordinates: [v.LONGITUDE, v.LATITUDE],
          };
          v.icon = img;
          v.text = v.NAME;
          return v;
        });

        let dataSet = new mapv.DataSet(arrayImage);

        let optionsICON = {
          draw: "icon",
          width: 35, // 规定图像的宽度
          height: 35, // 规定图像的高度
          // offset: { // 偏移值
          //       x: 0,
          //       y: 20
          //     }
        };

        let optionsTEXT = {
          draw: "text",
          size: 14,
          avoid: true, // 开启文本标注避让
          textBaseline: "middle",
          offset: {
            // 文本便宜值
            x: 0,
            y: 25,
          },
        };
        var dd = new mapv.baiduMapLayer(
          _self.map,
          dataSet,
          optionsICON
        );
        var tt = new mapv.baiduMapLayer(
          _self.map,
          dataSet,
          optionsTEXT
        );
        _self.MapV.VIcon_Installations[key] = dd
        _self.MapV.VText_Installations[key] = tt
      };
      // }else{
      //   mapVIcon.sh
      // }
    },
  },
  mounted () {
    // 显示地图
    this.mapShow();

    this.MapV.VIcon_Installations = {}
    this.MapV.VText_Installations = {}

    this.changeMapfeature();
    this.GetClientTemp();
    this.getPlaceWaterInfo();

  },
};
</script>

<style scoped lang="less">
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .container {
    flex: 1;
    #map {
      height: 100%;
      width: 100%;
    }
  }
}
.work-type-wrap {
  position: absolute;
  left: 25px;
  top: 100px;
  height: 50px;
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 400px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
.map-infos-wrap {
  position: absolute;
  left: 25px;
  top: 180px;
  height: 470px;
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 400px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    h3 {
      font-size: 15px;
      line-height: 26px;
      margin-left: 10px;
      i {
        float: right;
        font-style: normal;
        color: #666;
        font-size: 12px;
      }
    }
    .item-wrap {
      display: flex;
      margin-bottom: 20px;
      .item-con {
        flex: 1;
        text-align: center;
        h2 {
          margin-top: 10px;
          line-height: 30px;
          font-size: 20px;
        }
        span {
          font-size: 13px;
          color: #666;
        }
      }
    }
    .icon-wrap {
      margin: 10px 10px 10px 0;

      .icon-con {
        width: 33.33%;
        float: left;
        // text-align: center;
        padding-left: 20px;
        margin: 15px 0;
        position: relative;
        i {
          font-size: 20px;
          display: block;
          margin-bottom: 5px;
          color: #333;
        }
        .el-tag.el-tag--mini {
          position: absolute;
          right: 0;
          top: -8px;
          height: 15px;
          line-height: 15px;
          border-color: #e1dada;
          background: #e1dada;
          color: #666;
        }
        span {
          font-family: STHeiti;
          font-size: 14px;
          color: rgb(34, 34, 34);
        }
        &.hasColor {
          i {
            color: #007acc;
          }
          .el-tag.el-tag--mini {
            font-size: 14px;
            border-color: #007acc;
            background: #007acc;
            color: #fff;
          }
        }
      }
    }
    .map-checkboxs {
      margin-top: 10px;
      p {
        line-height: 30px;
      }
    }
    /deep/.el-progress-bar__outer {
      background: #d8d8d8;
    }
    /deep/.el-progress-bar {
      width: 90%;
    }
  }
  .info-tabs {
    position: absolute;
    right: -30px;
    top: 50px;
    background: rgba(255, 255, 255, 0.9);
    width: 30px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    a {
      display: block;
      padding: 3px 3px 1px 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &.active {
        background: #007acc;
        i {
          color: #fff;
        }
      }
    }
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
  }
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.schedule {
  width: 500px;
  height: 80%;
  position: absolute;
  overflow: scroll;
  right: 45px;
  top: 100px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_schedule {
  position: absolute;
  left: 10px;
  top: 100px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 25px;
    left: auto;
  }
}

.map-operation {
  margin: 10px 0;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #ecf0f3;
      background: #b2bbbe;
      font-size: 16px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      border-radius: 2px;
      i {
        margin-right: 3px;
        margin-bottom: 3px;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #fff;
        background: #007acc;
        border-radius: 2px;
      }
    }
  }
}

.hd {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 22px;
  margin: 10px;
}
.ht {
  text-align: center;
  color: rgb(71, 71, 71);
  font-size: 15px;
  margin: 10px;
}
</style>
